<template>
    <div id="editorText" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
    </div>
</template>

<script>
import E from 'wangeditor'
import { AlbumUpload } from '@/assets/api/fileUpload.js'
export default {
    data() {
        return {
            editor: ''
        }
    },
    props: {
        content: "" //获取从父组件中传过来的值，主要用于修改的时候获取值，并加入到富文本框中
    },

    mounted() {

        this.$nextTick(() => {
            // 初始化编辑器
            this.editorInfo()
        })
    },
    methods: {
        editorInfo() {
            let _this = this
            this.editor = new E('#editorText'),
                this.editor.config.menus = [
                    "head", // 标题
                    "bold", // 粗体
                    "fontSize", // 字号
                    "fontName", // 字体
                    "italic", // 斜体
                    "underline", // 下划线
                    "strikeThrough", // 删除线
                    "foreColor", // 文字颜色
                    "backColor", // 背景颜色
                    "link", // 插入链接
                    "list", // 列表
                    "justify", // 对齐方式
                    "quote", // 引用
                    "emoticon", // 表情
                    "image", // 插入图片
                    "table", // 表格
                    "code", // 插入代码
                    "undo", // 撤销
                    "redo", // 重复
                ];
            this.editor.config.focus = false;
            this.editor.config.onchange = function (newHtml) {
                let content = _this.editor.txt.html()
                let text = _this.editor.txt.text()
                // 对于一键格式化后的内容，空内容可能会出现<p></br></p>标签，此处进行判断
                if (_this.isEmptyEditor()) {
                    content = ''
                }
                _this.$emit('catchData', content, text)
            };
            //为true，则上传后的图片转为base64编码，为false,则上传图片到服务器，二者不能同时使用
            this.editor.config.uploadImgShowBase64 = false;
            //服务器接收的上传图片的属性名
            this.editor.config.uploadFileName = "file";
            //服务器上传图片的接口地址
            //this.editor.config.uploadImgServer = `http://localhost:8080/api/file/wangeditor`;
            //this.editor.config.uploadImgHeaders = {
            // 默认限制图片大小是 5M ，可以自己修改。
            this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
            // 限制类型,可自定义配置,默认为： ['jpg', 'jpeg', 'png', 'gif', 'bmp']
            this.editor.config.uploadImgAccept = ['jpg', 'jpeg', "png", "gif", "bmp", "webp"];
            this.editor.config.uploadImgTimeout = 10 * 1000;
            this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                
                var form = new FormData();
                // 添加键值对
                form.append("file", resultFiles[0]);
                // 调用后端服务器的接口
                AlbumUpload(form).then((resp) => {
                    insertImgFn(resp.data.pictureUrl)
                }).catch((e) => {
                    this.$message.error(e.message);
                    this.$refs.upload.clearFiles();
                })
            }
            // 在输入内容时，把内容传给父组件
            //   this.editor.config.onchange = (html) => {
            // this.$emit("change", html); 
            //   };
            this.editor.create()
            // 修改的时候，需要富文本内容回显，则需要加入以下代码
        this.editor.txt.html(this.content)
        },
        isEmptyEditor() {
            const children = this.editor.$textElem.children()
            for (let i = 0; i < children.elems.length; i++) {
                const node = children.elems[i]
                if (node && node.nodeType === Node.TEXT_NODE && node.textContent.trim().length !== '') {
                    return false
                }
                if (node && node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'p' && node.innerText.trim() !== '') {
                    return false
                }
            }
            return true
        }

    },


}
</script>

<style></style>